<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tree演示</title>
<script src="../style/jquery-2.1.1.js"></script>
<style>
.cotrs{ width:100px; height:32px;   }
.cotrs a{ height:32px;  padding:10px;  float:left;width: 100px;text-decoration:none;color: black;text-align: center; }
.cotrs a.thisclass{text-decoration:none; background:#6699FF;color: white;}
</style>
<script>
$(function(){
var cotrs = $(".cotrs a");
cotrs.click(function(){
  $(this).addClass("thisclass").siblings().removeClass("thisclass");
  $(this).css("color","white").siblings().css("color","black");
});
});

$(document).ready(function(){
	$(".f1").hide();
	$(".s1").hide();
	$(".first").click(function(){
		$(".f1").toggle(300);
	});
	$(".second").click(function(){
		$(".s1").toggle(300);
	});
	 $("a").attr("target","_blank");
});
</script>

</head>
<body>
<br><br>
<div class="cotrs">
<a href="http://www.baidu.com" class="thisclass">首页</a>
<a href="http://www.baidu.com">菜单导航</a>
<a href="javascript:void(0);" class="first">时间日期></a>
<a href="http://www.baidu.com" class="f1"> >焦点图</a>
<a href="http://www.baidu.com" class="f1"> >tab标签</a>
<a href="http://www.baidu.com" class="f1"> >jquery</a>

<a href="http://www.baidu.com">在线客服</a>
<a href="javascript:void(0);" class="second">广告代码></a>
<a href="http://www.baidu.com" class="s1">>相册代码</a>
<a href="http://www.baidu.com" class="s1">>图片特效</a>
<a href="http://www.baidu.com" class="s1">>名站特效</a>
<a href="http://www.baidu.com">其他代码</a>
<a href="http://www.baidu.com">HTML5</a>
</div><br>


</body>
</html>